Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

deps: Improve Webpack build performance #2288

Merged
merged 13 commits into from
Jan 14, 2025
Merged

deps: Improve Webpack build performance #2288

merged 13 commits into from
Jan 14, 2025

Conversation

SuaYoo
Copy link
Member

@SuaYoo SuaYoo commented Jan 8, 2025 •
edited
Loading

Context

Related to #2266, changes in Webpack only to improve build and rebuild performance.

Production build benchmark tests running hyperfine --show-output --shell zsh --warmup 3 'yarn build':

webpack version webpack-cli version Parallelized? Time Range
5.88.0 4.8.0 No 16.962 s ± 0.983 s 15.796 s … 19.364 s
5.97.1 5.1.4 No 15.559 s ± 0.159 s 15.082 s ± 0.207 s
5.97.1 5.1.4 Yes 15.559 s ± 0.159 s 14.712 s … 15.500 s

It's not a huge difference, but it seems like a good start to tweak thread-loader further.

Dev rebuild tests--this is a lot less methodical, I just ran yarn start and saved the index.ts file a few times.

webpack version webpack-cli version devtool DLL? Parallelized? Range
5.88.0 4.8.0 eval-cheap-source-map No No 1500-1600 ms
5.97.1 5.1.4 eval No No 1100-1300 ms
5.97.1 5.1.4 eval Yes No 500-530 ms
5.97.1 5.1.4 eval Yes No 450-480 ms

The most significant impact is implementing DllPlugin for the lit dependency. Interestingly, enabling DllPlugin in the production build slowed it down.

Changes

  • Upgrades webpack and webpack tool versions
  • Updates dev source map to webpack recommendation
  • Implements webpack.DllPlugin in dev for faster rebuilds
  • Implements thread-loader to run ts-loader in a worker pool

etc

Generated locales might be a good candidate for DllPlugin, if we generated a file for each locale.

@socket-security Socket Security
Copy link

socket-security bot commented Jan 8, 2025 •
edited
Loading

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package New capabilities Transitives Size Publisher
npm/@jsonjoy.com/[email protected] None 0 54.3 kB streamich
npm/@jsonjoy.com/[email protected] None +1 757 kB streamich
npm/@types/[email protected] None 0 5.57 kB types
npm/@types/[email protected] None 0 4.86 kB types
npm/@types/[email protected] None 0 6.27 kB types
npm/@types/[email protected] None 0 63.1 kB types
npm/@types/[email protected] None 0 7.91 kB types
npm/@types/[email protected] None +1 13.6 kB types
npm/@types/[email protected] None 0 4.71 kB types
npm/@types/[email protected] None 0 5.35 kB types
npm/@webassemblyjs/[email protected] None 0 207 kB xtuc
npm/@webassemblyjs/[email protected] None 0 6.37 kB xtuc
npm/@webassemblyjs/[email protected] None 0 11.3 kB xtuc
npm/@webassemblyjs/[email protected] None 0 10.8 kB xtuc
npm/@webassemblyjs/[email protected] None 0 10.5 kB xtuc
npm/@webassemblyjs/[email protected] None 0 34.2 kB xtuc
npm/@webassemblyjs/[email protected] None 0 19.7 kB xtuc
npm/@webassemblyjs/[email protected] None 0 5.34 kB xtuc
npm/@webassemblyjs/[email protected] None 0 48.5 kB xtuc
npm/@webassemblyjs/[email protected] None 0 12.3 kB xtuc
npm/@webassemblyjs/[email protected] None +1 172 kB xtuc
npm/@webassemblyjs/[email protected] None 0 28.1 kB xtuc
npm/@webassemblyjs/[email protected] None 0 14.4 kB xtuc
npm/@webassemblyjs/[email protected] None 0 39.6 kB xtuc
npm/@webpack-cli/[email protected] None 0 4.55 kB evilebottnawi
npm/@webpack-cli/[email protected] None 0 3.72 kB evilebottnawi
npm/@webpack-cli/[email protected] environment 0 11.6 kB evilebottnawi
npm/[email protected] network +1 74.9 kB ulisesgascon
npm/[email protected] None 0 66.6 kB mdidon
npm/[email protected] None 0 3.15 kB sindresorhus
npm/[email protected] None 0 0 B
npm/[email protected] None +1 57.8 kB ljharb
npm/[email protected] None 0 23.3 kB blakeembrey
npm/[email protected] None 0 3.02 kB sindresorhus
npm/[email protected] None 0 5.82 kB sindresorhus
npm/[email protected] None 0 4.42 kB sindresorhus
npm/[email protected] None 0 13 kB ljharb
npm/[email protected] environment, eval, filesystem, shell 0 162 kB tabrindle
npm/[email protected] None 0 10.2 kB ljharb
npm/[email protected] None 0 12.3 kB ljharb
npm/[email protected] None 0 9.17 kB ljharb
npm/[email protected] environment, filesystem, network +4 266 kB jonchurch
npm/[email protected] environment +1 23.3 kB wesleytodd
npm/[email protected] None 0 26.6 kB timoxley
npm/[email protected] None 0 10.8 kB ljharb
npm/[email protected] None 0 861 kB streamich
npm/[email protected] None 0 21.5 kB phated
npm/[email protected] None 0 62.3 kB whitequark
npm/[email protected] None +1 6.63 kB sindresorhus
npm/[email protected] None 0 4.54 kB sindresorhus
npm/[email protected] None 0 6.7 kB zkat
npm/[email protected] environment, filesystem, shell 0 17.1 kB soda
npm/[email protected] None 0 17.3 kB ljharb
npm/[email protected] None 0 5.08 kB sindresorhus

🚮 Removed packages: npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webassemblyjs/[email protected], npm/@webpack-cli/[email protected], npm/@webpack-cli/[email protected], npm/@webpack-cli/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected]

View full report↗︎

@SuaYoo SuaYoo marked this pull request as ready for review January 8, 2025 04:51
@SuaYoo SuaYoo requested review from emma-sg and ikreymer January 8, 2025 04:53
emma-sg
emma-sg approved these changes Jan 14, 2025
View reviewed changes
Copy link
Member

@emma-sg emma-sg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! Yeah, without spending a while running perf tests this does seem to be a little faster.

@SuaYoo SuaYoo merged commit dd22fd1 into main Jan 14, 2025
5 checks passed
@SuaYoo SuaYoo deleted the frontend-webpack-build-perf branch January 14, 2025 20:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@emma-sg emma-sg emma-sg approved these changes

@ikreymer ikreymer Awaiting requested review from ikreymer

Assignees
No one assigned
Labels
None yet
Projects
Webrecorder Projects
Status: Done!
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@SuaYoo @emma-sg